<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    maskClosable?: boolean //点击遮罩关闭modal
    title?: string //标题
    align?: 'center' | 'start' //标题对齐方式
    draggable?: boolean //拖拽
    width?: string
    visible: boolean
    full?: boolean //全屏
    footer?: boolean
    view?: boolean //只读查看
    beforeOk?: void
    ok?: void
  }>(),
  {
    maskClosable: true,
    draggable: false,
    align: 'start',
    full: false,
    footer: true,
    view: false,
  }
)
const emit = defineEmits(['cancel', 'update:visible'])
const isFull = ref(props.full)
const show = ref(props.visible)
watch(
  () => show.value,
  n => {
    emit('update:visible', n)
  }
)
</script>
<template>
  <a-modal v-model:visible="show" @before-ok="props.beforeOk" @ok="props.ok" :footer="props.footer && !props.view" :title-align="props.align" :mask-closable="props.maskClosable" :draggable="props.draggable" :width="props.width" @cancel="emit('cancel')" :fullscreen="isFull">
    <template #title>
      <div class="flex-js title">
        <slot name="title">
          <p>{{ props.title }}</p>
        </slot>
        <div class="icon" @click="isFull = !isFull">
          <icon-fullscreen v-if="!isFull" />
          <icon-fullscreen-exit v-else />
        </div>
      </div>
    </template>
    <div class="content hide-scroll" :class="['content', isFull ? 'full' : '']">
      <slot />
    </div>
  </a-modal>
</template>
<style lang="less" scoped>
.title {
  flex: 2;
  padding-right: 30px;
  .icon {
    cursor: pointer;
  }
}
.content {
  max-height: 70vh;
  overflow-y: scroll;
  padding: 10px;

  &.full {
    max-height: calc(85vh);
  }
}
</style>
